import { Component } from '@tarojs/taro'
import {Button, Icon, Text, View,ScrollView} from '@tarojs/components'

import { AtTabBar ,AtTabs,AtTabsPane} from 'taro-ui'

import './homePage.scss'
import Recommend from "../../components/recommend/recommend";
import {NumToPx,IsTextEmpty} from "../../utils/utils";
import taroUtils from "../../utils/taroUtils";
import store from "../../store/hotSearchStore";
import {getHomeItemData,getTaoBaoConfig} from "../../mode/homeCtr";
import AppStore from "../../store/appStore";

class HomePage extends Component{

  config = {
    navigationBarTitleText: '首页'
  }

  constructor(props) {
    super(props);
    this.state = {
      current:0,
      searchScrollviewHeight:450,
      data:[
        // { title: '今日推荐'  ,index:0,cat_id:0,api:2,list:[],curPage:1},

        // { title: '今日推荐'  ,index:0,cat_id:0,api:3,list:[],curPage:1},//定向计划商品API
        // { title: '精选好货' ,index:1,cat_id:1,api:5,list:[],curPage:1},//高佣专场商品
        // { title: '大额神券' ,index:2,cat_id:2,api:1,list:[],curPage:1},
        // { title: '低邮精选'  ,index:3,cat_id:1,api:4,list:[],curPage:1},//精选低价包邮专区
        // { title: '3.9包邮'  ,index:4,cat_id:4,api:4,list:[],curPage:1},
        // { title: '6.9包邮' ,index:5,cat_id:3,api:4,list:[],curPage:1},
        // { title: '9.9包邮'  ,index:6,cat_id:2,api:4,list:[],curPage:1},


        { title: '今日推荐'  ,index:0,cat_id:0,api:3,list:[],curPage:1},//定向计划商品API
        { title: '精选好货' ,index:1,cat_id:1,api:5,list:[],curPage:1},//高佣专场商品
        // { title: '大额神券' ,index:2,cat_id:2,api:1,list:[],curPage:1},
        { title: '大额神券'  ,index:2,cat_id:100,api:6,list:[],curPage:1},
        { title: '千元皇卷'  ,index:3,cat_id:1000,api:6,list:[],curPage:1},
        { title: '低邮精选'  ,index:4,cat_id:1,api:4,list:[],curPage:1},//精选低价包邮专区
        { title: '3.9包邮'  ,index:5,cat_id:4,api:4,list:[],curPage:1},
        { title: '6.9包邮' ,index:6,cat_id:3,api:4,list:[],curPage:1},
        { title: '9.9包邮'  ,index:7,cat_id:2,api:4,list:[],curPage:1},
        { title: '时尚女装'  ,index:8,cat_id:4,api:1,list:[],curPage:1},
        { title: '潮流男装'  ,index:9,cat_id:5,api:1,list:[],curPage:1},
        { title: '精致潮鞋' ,index:10,cat_id:6,api:1,list:[],curPage:1},
      ]

    }
  }

  componentWillMount () {

  }

  componentDidMount () {
    // if (IsTextEmpty(AppStore.data.taoBaoApi.app_key)){
    //   wx.cloud.callFunction({
    //     // 云函数名称
    //     name: 'getSecret',
    //   })
    //     .then(res => {
    //
    //       console.log(res.result)
    //
    //       var item = AppStore.data
    //       var result = res.result
    //       item.taoBaoApi.app_key = result.taobao.app_key
    //       item.taoBaoApi.app_secret =  result.taobao.app_secret
    //       item.taoBaoApi.haoDanKey = result.taobao.haoDanKey
    //       item.taoBaoApi.Pid =result.taobao.Pid
    //       item.taoBaoApi.tb_name =result.taobao.tb_name
    //       item.taoBaoApi.adzone_id =result.taobao.adzone_id
    //
    //       item.pingDuoDuoApi.client_id = result.pingduoduo.client_id
    //       item.pingDuoDuoApi.client_secret = result.pingduoduo.client_secret
    //       item.pingDuoDuoApi.pid = result.pingduoduo.pid
    //
    //       item.appConfig.open =1 //result.appconfig.open
    //
    //       AppStore.data = item
    //       this.handleClick(0)
    //     })
    //     .catch(console.error)
    // }else {
    //   this.handleClick(0)
    // }
    getTaoBaoConfig().then(res=>{
      this.handleClick(0)
    })
  }

  componentWillUnmount () { }

  componentDidShow () {
    // this.getHeight()
  }
  // getHeight(){
  //   var  temp = 0
  //   taroUtils.GetScrollViewSurplusContain(this,".sroView").then((height)=>{
  //     // console.log(height)
  //     if (height <=0){
  //       if (temp < 5 ){
  //         this.getHeight()
  //         temp = temp  +1
  //       }
  //     }else {
  //       this.setState({
  //         searchScrollviewHeight:height + 35
  //       })
  //     }
  //   })
  // }

  componentDidHide () { }

  onClickSearch = ()=>{
    Taro.navigateTo({
      url:'/pages/hotSearchPage/hotSearchPage'
    })
  }

  handleClick(value){
    this.setState({
      current:value,
    },()=>{
      if (this.state.data[value].list.length > 0)return;
      getHomeItemData(this.state.data[value]).then(res=>{
        var temp = this.state.data
        temp[value].list = res.data
        temp[value].curPage = res.pageIndex
        this.setState({
          data:temp
        })
      })
    })
  }

  /**
   * 更多
   * */
  ToLowerEvent=(ui,item)=>{
    if (item.api === 2){
      ui.RefData(true)
    }else {
      getHomeItemData(item).then(res=>{
        var temp = this.state.data
        const data = temp[item.index].list.concat(res.data)

        temp[item.index].list = data
        temp[item.index].curPage = res.pageIndex
        this.setState({
          data:temp
        },()=>{
          ui.RefData(true)
        })
      })
    }
  }


  createView(item,h){
    return(<View>
      <Recommend   list={item.list} height={NumToPx(h)} ToLowerEvent={(t)=>{
        this.ToLowerEvent(t,item)
      }} />
    </View>)

  }


  render () {
    var h = 750 //this.state.searchScrollviewHeight
    // if (this.state.searchScrollviewHeight <=0) {
    //   taroUtils.GetScrollViewSurplusContain(this,".sroView").then((height)=>{
    //     this.setState({
    //       searchScrollviewHeight:height + 35
    //     })
    //   })
    //   // h = this.state.searchScrollviewHeight+35
    // }

    return (
      <View className={'home'}>
        <View className='search'>
          <Button className='search-btn' onClick={this.onClickSearch}>
            <Icon className='search-btn-img' type='search'/>
            <Text className='search-btn-txt'>
              {
                appStore.appConfig.open >= 1 ? '复制淘宝/京东/拼多多商品名称搜索' : '搜索商品名称'

              }
            </Text>
          </Button>
        </View>
        <View className={'sroView'}>
          <AtTabs
            current={this.state.current}
            scroll
            tabList={this.state.data}
            onClick={this.handleClick.bind(this)}>
            <AtTabsPane current={this.state.current} index={0}>
              {this.createView(this.state.data[0],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={1}>
              {this.createView(this.state.data[1],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={2}>
              {this.createView(this.state.data[2],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={3}>
              {this.createView(this.state.data[3],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={4}>
              {this.createView(this.state.data[4],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={5}>
              {this.createView(this.state.data[5],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={6}>
              {this.createView(this.state.data[6],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={7}>
              {this.createView(this.state.data[7],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={8}>
              {this.createView(this.state.data[8],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={9}>
              {this.createView(this.state.data[9],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={10}>
              {this.createView(this.state.data[10],h)}
            </AtTabsPane>
          </AtTabs>
        </View>
      </View>
    )
  }
}

export  default HomePage
